<template>
  <view class="payment-card" :class="className" :style="{width: width}">
    <view class="title" >
        {{ title }}
    </view>
    <view class="subtitle" >
        快捷支付  省心省力
    </view>
    <view class="btn-box" >
        <button class="btn" @click="onClick(title)">
           {{ btnText }} 
        </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
const props = defineProps({
    title: {
        type: String
    },
    className: {
        type: String
    },
    width: {
        type: String,
		default: "80vw"
    },
    btnText: {
        type: String,
		default: "去支付"
    },
})
const emits =defineEmits("on-click")
function onClick (name) {
    emits('on-click',name)
}
</script>

<style lang="less" scoped>
@import url(./style/index.less);

</style>